<template>
  <div>
    <el-card class="box-card">
      <div class="search-wrapper">
        <el-form :inline="true" :model="searchObj" class="demo-form-inline" size="mini"  ref="searchForm">
          <el-form-item label="系统模块" prop="module">
            <el-input v-model="searchObj.module" placeholder="系统模块"></el-input>
          </el-form-item>
          <el-form-item label="类型" prop="type">
            <el-select v-model="searchObj.type" placeholder="类型">
              <el-option
                  v-for="item in operationTypeList"
                  :key="item.value"
                  :label="item.label"
                  :value="item.value">
              </el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="状态" prop="success">
            <el-select v-model="searchObj.success" placeholder="状态">
              <el-option label="成功" :value="true"></el-option>
              <el-option label="失败" :value="false"></el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="活动时间" required>
<!--            <el-col :span="11">-->
<!--              <el-form-item>-->
<!--                <el-date-picker type="date" placeholder="选择日期" v-model="searchObj.startTime[0]" style="width: 100%;"></el-date-picker>-->
<!--              </el-form-item>-->
<!--            </el-col>-->
<!--            <el-col class="line" :span="2">-</el-col>-->
<!--            <el-col :span="11">-->
<!--              <el-form-item>-->
<!--                <el-date-picker type="date" placeholder="选择日期" v-model="searchObj.startTime[1]" style="width: 100%;"></el-date-picker>-->
<!--              </el-form-item>-->
<!--            </el-col>-->
            <el-date-picker v-model="searchObj.startTime" style="width: 240px" value-format="yyyy-MM-dd HH:mm:ss" type="daterange"
                            range-separator="-" start-placeholder="开始日期" end-placeholder="结束日期" :default-time="['00:00:00', '23:59:59']" />
          </el-form-item>
          <el-form-item>
            <el-button type="primary" @click="handleSubmit">查询</el-button>
            <el-button type="success" @click="resetForm('searchForm')">重置</el-button>
            <el-button type="info" @click="exportData">导出</el-button>
          </el-form-item>
        </el-form>
      </div>
      <div class="data-wrapper">
        <el-table
            :data="operationLogList"
            stripe
            style="width: 100%">
          <el-table-column
              prop="id"
              label="日志编号"
              width="180">
          </el-table-column>
          <el-table-column
              prop="module"
              label="操作模块"
              width="180">
          </el-table-column>
          <el-table-column
              prop="name"
              label="操作名">
          </el-table-column>
          <el-table-column
              prop="userId"
              label="操作人编号">
          </el-table-column>
          <el-table-column
              prop="resultCode"
              label="操作结果">
          </el-table-column>
          <el-table-column
              prop="startTime"
              label="操作日期">
          </el-table-column>
          <el-table-column
              prop="duration"
              label="执行时长">
          </el-table-column>
          <el-table-column
              label="操作">
            <template slot-scope="scope">
              <a style="cursor: pointer" @click="showInfo(scope.row.id)">
                <i class="el-icon-info"></i>
              </a>
            </template>
          </el-table-column>
        </el-table>
      </div>
      <el-pagination
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
          layout="total, sizes, prev, pager, next, jumper"
          :page-sizes="[10, 20, 50, 100]"
          :current-page="pageNo"
          :page-size="pageSize"
          :total="total">
      </el-pagination>
    </el-card>

    <!-- 操作日志详细 -->
    <el-dialog title="访问日志详细" :visible.sync="open" width="700px" append-to-body>
      <el-form ref="form" :model="form" label-width="100px" size="mini">
        <el-row>
          <el-col :span="24">
            <el-form-item label="日志主键：">{{ form.id }}</el-form-item>
          </el-col>
          <el-col :span="24">
            <el-form-item label="用户信息：">{{ form.userId }} | {{ form.userNickname }} | {{ form.userIp }} | {{ form.userAgent}} </el-form-item>
          </el-col>
          <el-col :span="24">
            <el-form-item label="操作信息：">
              {{ form.module }} | {{ form.name }}
<!--              <dict-tag :type="DICT_TYPE.SYSTEM_OPERATE_TYPE" :value="form.type"/>-->
              <br /> {{ form.content }}
              <br /> {{ form.exts }}
            </el-form-item>
          </el-col>
          <el-col :span="24">
            <el-form-item label="请求信息：">{{ form.requestMethod }} | {{ form.requestUrl }} </el-form-item>
          </el-col>
          <el-col :span="24">
            <el-form-item label="方法名：">{{ form.javaMethod }}</el-form-item>
          </el-col>
          <el-col :span="24">
            <el-form-item label="方法参数：">{{ form.javaMethodArgs }}</el-form-item>
          </el-col>
          <el-col :span="24">
            <el-form-item label="开始时间：">
              {{ form.startTime }} | {{ form.duration }} ms
            </el-form-item>
          </el-col>
          <el-col :span="24">
            <el-form-item label="操作结果：">
              <div v-if="form.resultCode === 200">正常 | {{ form.resultData}} </div>
              <div v-else>失败 | {{ form.resultCode }} || {{ form.resultData}}</div>
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="open = false">关 闭</el-button>
      </div>
    </el-dialog>

  </div>
</template>

<script>
import operationLogApi from "@/api/operationLog"
export default {
  name: "index",
  data() {
    return {
      total:0,
      pageNo:1,
      pageSize:10,
      open:false,
      form:{},
      searchObj: {
        startTime:[]
      },
      operationTypeList:[
        {value:'1',label:'查询'},
        {value:'2',label:'新增'},
        {value:'3',label:'修改'},
        {value:'4',label:'删除'},
        {value:'5',label:'导出'},
        {value:'6',label:'导入'},
        {value:'0',label:'其他'},
      ],
      operationLogList:[],
    }
  },
  computed: {},
  created() {
    this.init()
  },
  methods: {
    init() {
      this.getOperationLogList()
    },
    async getOperationLogList(){
      this.searchObj.pageSize = this.pageSize
      this.searchObj.pageNo = this.pageNo
      let params = this.searchObj
      if (this.searchObj.startTime.length>0){
        params.startTime = this.searchObj.startTime+''
      }
      const{data:res} = await operationLogApi.getOperationLog(params)
      this.operationLogList = res.data.records
      this.pageSize = res.data.size
      this.pageNo = res.data.current
      this.total = res.data.total
    },
    async handleSubmit(){
      await this.getOperationLogList()
    },
    resetForm(formName){
      this.$refs[formName].resetFields();
      this.searchObj.startTime=[]
    },
    handleSizeChange(){
      this.getOperationLogList()
    },
    handleCurrentChange(){
      this.getOperationLogList()
    },
    async showInfo(id){
      const {data:res} = await operationLogApi.info(id)
      this.form = res.data
      this.open=true
    },
    exportData(){
      let params = this.searchObj
      if (this.searchObj.startTime.length>0){
        params.startTime = this.searchObj.startTime+''
      }

      operationLogApi.export(params).then((res) => {
        const objectUrl = URL.createObjectURL(
            new Blob([res.data], {
              type: 'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet',
            })
        )
        const link = document.createElement('a')
        // 设置导出的文件名称
        link.download = `日志列表` + '.xlsx'
        link.style.display = 'none'
        link.href = objectUrl
        link.click()
        document.body.appendChild(link)
      })
    }
  }
}
</script>

<style lang="less" scoped>
.box-card{
  height: 500px;
}
</style>